<template>
    <view style="width:100%">
        <picker style="width:100%" @change="save" :range="data" :range-key="labelKey">
            <text v-if="valLabel">{{valLabel}}</text>
            <text class="placeholder" v-if="!valLabel">{{placeholder}}</text>
        </picker>
    </view>
</template>

<script>
    export default {
        name: "zw-select",
        props: {
            data: {
                type: [Array, Object],
                default: null
            },
            placeholder: {
                type: String,
                default: "请选择"
            },
            valKey: {
                type: String,
                default: "value"
            },
            labelKey: {
                type: String,
                default: "label"
            },
        },
        data() {
            return {
                value: "",
                valLabel: ""
            };
        },
        methods: {
            async save(e) {
                this.value = this.data[e.target.value][this.valKey];
                this.valLabel = this.data[e.target.value][this.labelKey];
                this.$emit('input', this.value)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .placeholder {
        color: #797979;
    }
</style>
